<template lang="pug">
  section.container-fluid
    h1.title Universal Vue.js Application Framework
    .row
      .col-6.col-sm-6.col-md-4.col-lg-3.col-xl-3
        .card .col-6 .col-md-4
      .col-6.col-sm-6.col-md-4.col-lg-3.col-xl-3
        .card .col-6 .col-md-4
      .col-6.col-sm-6.col-md-4.col-lg-3.col-xl-3
        .card .col-6 .col-md-4
      .col-6.col-sm-6.col-md-4.col-lg-3.col-xl-3
        .card .col-6 .col-md-4
      .col-6.col-sm-6.col-md-4.col-lg-3.col-xl-3
        .card .col-6 .col-md-4
      .col-6.col-sm-6.col-md-4.col-lg-3.col-xl-3
        .card.bg-white
          p.col-6 .col-md-4
    nuxt-link(class='button' to='/about') About page
</template>

<script>
/* eslint-disable no-unused-vars */
if (process.browser && process.env.NODE_ENV === 'development') {
  let VConsole = require('vconsole/dist/vconsole.min')
  const vConsole = new VConsole()
}
export default {
  name: 'index',
  head () {
    return {
      meta: [{
        name: 'apple-mobile-web-app-title',
        content: this.$t('site.name')
      }]
    }
  },
  components: {
  },

  props: {
  },

  data() {
    return {
    }
  },

  computed: {
  },

  watch: {
  },

  methods: {
  },

  mounted() {
    console.log(this.$t('site.name'))
  }

}
</script>

<style lang="stylus">
@import '~assets/stylus/variables.styl'
.card
  position: relative;
  margin: 3px 0;
  height: 0
  padding-top: 100%;
  background:  $grey-light
  p
    position: absolute
    bottom: 1rem
.title
  color $color-grey
  margin: 50px 0;
</style>
